<style>
    .layui-table th {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-table td {
        position: relative;
        padding: 5px 15px !important;
        min-height: 20px;
        line-height: 20px;
        font-size: 14px;
    }

    .layui-input-my {
        height: 34px !important;
        line-height: 34px !important;
        border-width: 1px;
        border-style: solid;
        background-color: #fff;
        border-radius: 2px;
    }

    .special-label {
        float: left;
        display: block;
        padding: 9px 0 !important;
        width: 100px !important;
        font-weight: 400;
        line-height: 20px;
        text-align: right;
    }

    .layui-input-inline-my {
        width: 80% !important;
    }
</style>
<div class="layui-form" lay-filter="form-pdr-api">

    <fieldset class="layui-elem-field">
        <legend>接口基础信息</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">服务项目</label>
                <div class="layui-input-block">
                    <select name="pdrProjectId" id="pdrProjectId" lay-filter="pdrProjectId" lay-verify="required">
                        <option value="">请选择所属服务项目</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">接口名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" autocomplete="off" lay-verify="required" placeholder="请输入接口名称"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口描述</label>
                <div class="layui-input-block">
                    <input type="text" name="description" autocomplete="off" lay-verify="required"
                           placeholder="请输入接口描述"
                           class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">请求类型</label>
                <div class="layui-input-block">
                    <select name="queryType" id="queryType" lay-verify="required">
                        <option value="">请选择请求类型</option>
                        <option value="GET">GET</option>
                        <option value="PUT">PUT</option>
                        <option value="POST">POST</option>
                        <option value="DELETE">DELETE</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">请求路径</label>
                <div class="layui-input-block">
                    <input type="text" name="path" autocomplete="off" lay-verify="required"
                           placeholder="请输入请求路径"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">接口状态</label>
                <div class="layui-input-block">
                    <input type="radio" name="enable" value="1" title="启用" checked="">
                    <input type="radio" name="enable" value="0" title="禁用">
                </div>
            </div>

        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>出入参配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item layui-row">
                <div class="layui-col-md10">
                    <label class="layui-form-label">接口入参</label>
                    <div class="layui-input-inline layui-input-inline-my">
                    <textarea id="inParam" name="inParam" placeholder="请输入接口入参(json格式)"
                              class="layui-textarea"
                              lay-verify="required" disabled>[{"name":"id","desc":"主键","type":"number","require":"Y","example":"主键"}]</textarea>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal completeIn">补充入参</button>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-row">
                <div class="layui-col-md10">
                    <label class="layui-form-label">接口出参</label>
                    <div class="layui-input-inline layui-input-inline-my">
                    <textarea id="outParam" name="outParam" placeholder="请输入接口出参(json格式)"
                              class="layui-textarea "
                              lay-verify="required" disabled>[{"name":"id","desc":"主键","type":"number","show":"Y","example":"主键"}]</textarea>
                    </div>
                </div>
                <div class="layui-col-md2">
                    <div class="layui-input-inline">
                        <button class="layui-btn layui-btn-normal completeOut">补充出参</button>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>限流配置配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">每秒请求数</label>
                <div class="layui-input-block">
                    <input type="number" name="permitsPerSecond" value="1000" placeholder="请输入每秒请求数"
                           class="layui-input"
                           min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>防火墙配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label">IP黑名单</label>
                <div class="layui-input-block">
                    <textarea name="blackList" placeholder="请输入IP黑名单(使用逗号分隔)" class="layui-textarea"></textarea>
                </div>
            </div>
        </div>
    </fieldset>


<!--    <fieldset class="layui-elem-field">-->
<!--        <legend>熔断/降级配置</legend>-->
<!--        <div class="layui-field-box" id="hystrixParamTplBox">新增接口默认继承项目配置</div>-->
<!--    </fieldset>-->


    <input type="button" lay-submit lay-filter="LAY-pdr-api-add-submit" value="添加服务接口"
           class="layui-btn layui-btn-fluid">
</div>

<!--<script type="text/html" id="hystrixParamTpl">-->
<!--    <div class="layui-form-item">-->

<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">groupKey</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="groupKey"-->
<!--                       value="{{d.groupKey||'project-group'}}" autocomplete="off"-->
<!--                       lay-verify="required"-->
<!--                       placeholder="请输入commandKey"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">commandKey</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="commandKey"-->
<!--                       value="{{d.commandKey||'project-command'}}" autocomplete="off"-->
<!--                       lay-verify="required"-->
<!--                       placeholder="请输入commandKey"-->
<!--                       class="layui-input">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->

<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">重试间隔</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="number" name="sleepWindowInMilliseconds"-->
<!--                       value="{{d.sleepWindowInMilliseconds||1000}}" autocomplete="off"-->
<!--                       placeholder="请输入休眠重试间隔"-->
<!--                       class="layui-input"-->
<!--                       min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">超时时间</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="number" name="timeoutInMilliseconds"-->
<!--                       value="{{d.timeoutInMilliseconds||20000}}" placeholder="请输入请求超时时间"-->
<!--                       class="layui-input"-->
<!--                       min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div class="layui-form-item">-->
<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">最小请求数</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="number" name="requestVolumeThreshold"-->
<!--                       value="{{d.requestVolumeThreshold||20}}"-->
<!--                       placeholder="请输入短路最小请求数"-->
<!--                       class="layui-input"-->
<!--                       min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">失败百分比</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="number" name="errorThresholdPercentage"-->
<!--                       value="{{d.errorThresholdPercentage||80}}"-->
<!--                       placeholder="请输入失败百分比阈值"-->
<!--                       class="layui-input"-->
<!--                       min="0" max="100000" lay-verType="tips" lay-verify="number" lay-verify="required">-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</script>-->

<script>
    layui.use(['admin', 'form', 'setter', 'laytpl'], function () {
        var $ = layui.$
            , admin = layui.admin
            , form = layui.form
            , view = layui.view
            , laytpl = layui.laytpl
            , setter = layui.setter;

        var apiUrl = setter.apiUrl;

        initForm();

        function initForm() {
            loadProject();
            form.render();
        }

        function loadProject() {
            admin.req({
                url: apiUrl + '/mapi/producer/drop/list'
                , method: 'post'
                , data: {}
                , done: function (response) {
                    if (response.code === 0) {
                        let dropList = response.data;
                        for (let i = 0; i < dropList.length; i++) {
                            let item = dropList[i];
                            let html = "<option value='" + item.id + "'>" + item.name + "</option>";
                            $('#pdrProjectId').append(html);
                            console.log(html);
                        }
                        form.render('select');
                    } else {
                        layer.msg(response.msg, {
                            offset: '15px', icon: 2
                        });
                    }
                }
            });
        }

        // form.on('select(pdrProjectId)', function (data) {
        //     let projectId = data.value;
        //     if (projectId == 0 || projectId == '') {
        //         return;
        //     }
        //     admin.req({
        //         url: apiUrl + '/mapi/producer/detail/' + projectId
        //         , method: 'get'
        //         , done: function (response) {
        //             if (response.code === 0) {
        //                 let tplData = response.data.hystrixParam;
        //                 //调用获取详情接口获取熔断降级配置
        //                 var hystrixParamTplHtml = hystrixParamTpl.innerHTML,
        //                     hystrixParamTplBox = document.getElementById('hystrixParamTplBox');
        //                 laytpl(hystrixParamTplHtml).render(tplData, function (html) {
        //                     hystrixParamTplBox.innerHTML = html;
        //                 });
        //             } else {
        //             }
        //         }
        //     });
        // });


        $('body').off('click', '.completeIn').on("click", ".completeIn", function () {
            console.log($('#inParam').html());
            var inParams = JSON.parse($('#inParam').html());
            admin.popup({
                title: '补充入参数据'
                , area: ['70%', '100%']
                , id: 'LAY-popup-pdr-api-in-complete'
                , success: function (layero, index) {
                    view(this.id).render('interface/api/in', inParams).done(function () {
                        form.on('submit(LAY-pdr-api-in-complete-submit)', function (data) {
                            var formData = data.field;
                            var inData = [];
                            console.log(formData.indexArrayStr.length);
                            if (formData.indexArrayStr.length !== 0) {
                                var indexArray = formData.indexArrayStr.split(',');
                                if (indexArray.length > 0) {
                                    for (var i = 0; i < indexArray.length; i++) {
                                        let idx = indexArray[i];
                                        let idxName = 'name[' + idx + ']';
                                        let name = formData[idxName];
                                        let idxDesc = 'desc[' + idx + ']';
                                        let desc = formData[idxDesc];
                                        let idxType = 'type[' + idx + ']';
                                        let type = formData[idxType];
                                        var idxRequire = 'require[' + idx + ']';
                                        let require = formData[idxRequire];
                                        var idxExample = 'example[' + idx + ']';
                                        let example = formData[idxExample];
                                        var single = {
                                            name: name,
                                            desc: desc,
                                            type: type,
                                            require: require,
                                            example: example
                                        };
                                        inData.push(single);
                                    }
                                }
                            }
                            $('#inParam').html(JSON.stringify(inData));
                            layer.close(index);
                        });
                    });
                }
            });
        });
        $('body').off('click', '.completeOut').on("click", ".completeOut", function () {
            console.log($('#outParam').html());
            var inParams = JSON.parse($('#outParam').html());
            admin.popup({
                title: '补充出参数据'
                , area: ['70%', '100%']
                , id: 'LAY-popup-pdr-api-out-complete'
                , success: function (layero, index) {
                    view(this.id).render('interface/api/out', inParams).done(function () {
                        form.on('submit(LAY-pdr-api-out-complete-submit)', function (data) {
                            var formData = data.field;
                            var inData = [];
                            if (formData.indexArrayStr.length !== 0) {
                                var indexArray = formData.indexArrayStr.split(',');
                                if (indexArray.length > 0) {
                                    for (var i = 0; i < indexArray.length; i++) {
                                        let idx = indexArray[i];
                                        let idxName = 'name[' + idx + ']';
                                        let name = formData[idxName];
                                        let idxDesc = 'desc[' + idx + ']';
                                        let desc = formData[idxDesc];
                                        let idxType = 'type[' + idx + ']';
                                        let type = formData[idxType];
                                        var idxExample = 'example[' + idx + ']';
                                        let example = formData[idxExample];
                                        var single = {name: name, desc: desc, type: type, example: example};
                                        inData.push(single);
                                    }
                                }
                            }
                            $('#outParam').html(JSON.stringify(inData));
                            layer.close(index);
                        });
                    });
                }
            });
        });
    });
</script>